<template>
    <div>
        <p class="title">已选课程</p>

        <!-- 课程查询 -->
        <div style="padding: 10px 0">
            <el-select style="margin: 0 10px;width: 150px;" v-model="selectedValue" placeholder="请查询筛选条件">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <el-input style="margin-right:10px; width: 300px" placeholder="请输入关键字进行查询" suffix-icon="el-icon-search"
                v-model="keywords"></el-input>
            <el-button style="width: 80px;" type="primary" @click="load">查询</el-button>
        </div>

        <!-- 可选课程表格 -->
        <el-table :data="tableData" border stripe :header-cell-class-name="'headerBg'"
            :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }">

            <el-table-column prop="cid" label="课程编号">
            </el-table-column>
            <el-table-column prop="term" label="修读学期">
            </el-table-column>
            <el-table-column prop="name" label="课程名">
            </el-table-column>
            <el-table-column prop="teacher" label="授课教师">
            </el-table-column>
            <el-table-column prop="period" label="总学时">
            </el-table-column>
            <el-table-column prop="credit" label="学分">
            </el-table-column>
            <el-table-column prop="location" label="地点">
            </el-table-column>
            <el-table-column prop="week" label="周次">
            </el-table-column>
            <el-table-column prop="section" label="节次">
            </el-table-column>
            <el-table-column prop="attr" label="课程属性">
            </el-table-column>
            <el-table-column prop="capacity" label="课容量">
            </el-table-column>
            <el-table-column prop="selectedTime" label="选课时间" width="100px">
            </el-table-column>
            <el-table-column prop="score" label="成绩" width="70px">
            </el-table-column>

            <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                    <el-button @click="showDetail(scope.$index)" size="small">详情</el-button>
                    <el-button @click="handleClick(scope.row)" type="danger" size="small">退课</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div style="padding: 10px 0">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
                :page-sizes="[2, 5, 10, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>

        <el-dialog title="课程详情" :visible.sync="dialogFormVisible" width="50%">
            <el-descriptions style="margin: 20px 10px;" :column="3" border>
                <el-descriptions-item label="课程编号">{{ tableData[chooseIndex].cid }}</el-descriptions-item>
                <el-descriptions-item label="修读学期">{{ tableData[chooseIndex].term }}</el-descriptions-item>
                <el-descriptions-item label="课程名">{{ tableData[chooseIndex].name }}</el-descriptions-item>
                <el-descriptions-item label="授课教师">{{ tableData[chooseIndex].teacher }}</el-descriptions-item>
                <el-descriptions-item label="总学时">{{ tableData[chooseIndex].period }}</el-descriptions-item>
                <el-descriptions-item label="学分">{{ tableData[chooseIndex].credit }}</el-descriptions-item>
                <el-descriptions-item label="地点">{{ tableData[chooseIndex].location }}</el-descriptions-item>
                <el-descriptions-item label="周次">{{ tableData[chooseIndex].week }}</el-descriptions-item>
                <el-descriptions-item label="节次">{{ tableData[chooseIndex].section }}</el-descriptions-item>
                <el-descriptions-item label="课程属性">{{ tableData[chooseIndex].attr }}</el-descriptions-item>
                <el-descriptions-item label="课容量">{{ tableData[chooseIndex].capacity }}</el-descriptions-item>
                <el-descriptions-item label="选课人数">{{ tableData[chooseIndex].selectNum }}</el-descriptions-item>
            </el-descriptions>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            sid: localStorage.getItem("sid"),
            /*筛选条件value值*/
            selectedValue: "name",
            /*查询输入关键字*/
            keywords: '',
            /*筛选条件*/
            options: [{
                value: 'name',
                label: '课程名'
            }, {
                value: 'cid',
                label: '课程编号'
            }, {
                value: 'teacher',
                label: '授课教师'
            }, {
                value: 'location',
                label: '地点'
            }],
            /*表格数据*/
            tableData: [{
                cid: 'C2222102910',
                term: '2020秋',
                name: '计算机组成原理',
                teacher: '毛爱英',
                period: '32',
                credit: '2.5',
                location: '浮山校区 博知楼250',
                week: '1-8',
                section: '47',
                attr: '必修',
                capacity: '32',
                selectNum: '12',
                selectedTime: '2023-12-02 22:21:07'/*选课时间*/,
                score: "87"
            }],
            /*课程详情选择index*/
            chooseIndex: 0,
            dialogFormVisible: false,
            /*分页信息*/
            total: 0,
            pageNum: 1,
            pageSize: 5,
        }
    },
    created() {
        this.load();
    },
    methods: {
        /**
         * 详情按钮事件
         */
        showDetail(index) {
            this.chooseIndex = index;
            this.dialogFormVisible = true;
        },
        /**
         * 选课数据加载
         */
        load() {
            this.request.get("/student/selectedCourse", {
                params: {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    selectedValue: this.selectedValue,
                    keywords: this.keywords,
                    sid: this.sid
                }
            }).then(res => {
                this.tableData = res.records
                this.total = res.total
            })
        },
        /*分页函数*/
        handleSizeChange(pageSize) {
            this.pageSize = pageSize
            this.load()
        },
        handleCurrentChange(pageNum) {
            this.pageNum = pageNum
            this.load()
        }
    }
}
</script>
<style>
.title {
    font-size: 18px;
    color: #303133;
    margin: 10px;
}

.headerBg {
    background-color: #eee !important;
}
</style>